<ng-container *ngIf="props.options | toAsync: $any(props) | async as optionsData">
  <nz-select
    #instance
    [formControl]="formControl"
    [formlyAttributes]="field"
    [compareWith]="props.compareWith"
    [nzShowSearch]="props.nzShowSearch"
    [nzAllowClear]="props.nzAllowClear"
    [nzPlaceHolder]="props.nzPlaceHolder || props.placeholder"
    [nzOpen]="props.nzOpen"
    [nzAutoFocus]="props.nzAutoFocus"
    [nzDisabled]="props.nzDisabled || props.disabled || formControl?.disabled"
    [nzDropdownClassName]="props.nzDropdownClassName"
    [nzDropdownMatchSelectWidth]="props.nzDropdownMatchSelectWidth"
    [nzDropdownStyle]="props.nzDropdownStyle"
    [nzServerSearch]="props.nzServerSearch"
    [nzFilterOption]="props.nzFilterOption"
    [nzMaxMultipleCount]="props.nzMaxMultipleCount"
    [nzMode]="props.nzMode"
    [nzNotFoundContent]="nzNotFoundContent"
    [nzSize]="props.nzSize"
    [nzAutoClearSearchValue]="props.nzAutoClearSearchValue"
    [nzBackdrop]="props.nzBackdrop"
    [nzBorderless]="props.nzBorderless"
    [nzShowArrow]="props.nzShowArrow"
    [nzCustomTemplate]="nzCustomTemplate"
    [nzSuffixIcon]="nzSuffixIcon"
    [nzRemoveIcon]="nzRemoveIcon"
    [nzClearIcon]="nzClearIcon"
    [nzMenuItemSelectedIcon]="nzMenuItemSelectedIcon"
    [nzTokenSeparators]="props.nzTokenSeparators"
    [nzLoading]="props.nzLoading"
    [nzMaxTagCount]="props.nzMaxTagCount"
    [nzMaxTagPlaceholder]="nzMaxTagPlaceholder"
    [nzOptionHeightPx]="props.nzOptionHeightPx"
    [nzOptionOverflowSize]="props.nzOptionOverflowSize"
    (nzOpenChange)="props.nzOpenChange?.($event, field, instance)"
    (nzScrollToBottom)="props.nzScrollToBottom?.($event, field, instance)"
    (nzOnSearch)="props.nzOnSearch?.($event, field, instance)"
    (nzFocus)="props.nzFocus?.($event, field, instance)"
    (nzBlur)="props.nzBlur?.($event, field, instance)"
    ngDefaultControl
  >
    <ng-container *ngFor="let item of optionsData">
      <ng-container *ngIf="item.hide !== false">
        <nz-option-group *ngIf="item.group; else simpleTemplate" [nzLabel]="item.label">
          <ng-container *ngFor="let child of item.group">
            <nz-option
              *ngIf="child.hide !== false"
              [nzValue]="child.value"
              [nzDisabled]="child.disabled"
              [nzLabel]="child.label"
              [nzCustomContent]="child.nzCustomContent"
            >
              <ng-container *nzStringTemplateOutlet="labelTemplate; context: { $implicit: item, field: field }">
                <span>{{ labelTemplate }}</span>
              </ng-container>
            </nz-option>
          </ng-container>
        </nz-option-group>

        <ng-template #simpleTemplate>
          <nz-option
            [nzValue]="item.value"
            [nzDisabled]="item.disabled"
            [nzLabel]="item.label"
            [nzHide]="item.hide"
            [nzCustomContent]="item.nzCustomContent"
          >
            <ng-container *nzStringTemplateOutlet="labelTemplate; context: { $implicit: item, field: field }">
              <span>{{ labelTemplate }}</span>
            </ng-container>
          </nz-option>
        </ng-template>
      </ng-container>
    </ng-container>
  </nz-select>
</ng-container>
